<template>
  <el-dialog
    :visible.sync="visible"
    :fullscreen="fullscreen"
    :custom-class="!fullscreen ? 'custom-height': 'custom-fullscreen'"
    :close-on-click-modal="false"
    :show-close="false"
    append-to-body
    @closed="close"
  >
    <el-row slot="title" type="flex">
      <el-col :span="20">{{ title }}</el-col>
      <el-col :span="4" style="text-align: right">
        <svg-icon
          :icon-class="!fullscreen ? 'fullscreen': 'exit-fullscreen'"
          style="cursor: pointer; margin-right: 10px"
          @click="() => {fullscreen = !fullscreen}"
        />
        <i class="el-icon-close" style="cursor: pointer" @click="close" />
      </el-col>
    </el-row>
    <el-form ref="dataForm" :model="form" label-position="right" label-width="100px">
      <el-row :gutter="18">
        <el-col :span="24">
          <el-form-item
            label="工艺名称"
          >
            <!-- <el-input
            placeholder="请输入工艺"
            v-model="form.techName"
          /> -->
            <el-select
              v-model="form.techName"
              filterable
              placeholder="请选择工艺名称"
            >
              <el-option value="0" label="-- 请选择 --" />
              <el-option
                v-for="(item, index) in more.gymcOptions"
                :key="index"
                :value="item.label"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="数量"
          >
            <el-input-number
              v-model="form.techQuantity"
              controls-position="right"
              :min="numberMin"
              placeholder="请输入数量"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="标准工时"
          >
            <el-input
              v-model="form.techTime"
              placeholder="请输入标准工时"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="备选设备"
          >
            <!-- <el-select
                v-model="form.equipment"
                placeholder="请选择设备"
            >
                <el-option
                    v-for="item in options"
                    :key="item.equipmentNumber"
                    :label="item.equipmentNumber"
                    :value="item.equipmentNumber"
                />
            </el-select> -->
            <el-select v-model="equipmentList" multiple placeholder="请选择设备" @click.native="openEquipment" />
          </el-form-item>
        </el-col>
      <!-- <el-col :span="24">
        <el-form-item
          label="开始时间"
        >
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="结束时间"
        >
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
          />
        </el-form-item>
      </el-col> -->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">
        取消
      </el-button>
      <el-button type="primary" :loading="state.confirmSubmit" :disabled="state.confirmSubmit" @click="onSubmit">
        确定
      </el-button>
    </div>
    <equipment-modal ref="equipmentModal" @OK="equipmentOK" />
  </el-dialog>
</template>

<script>
import form from '@/components/diboot/mixins/form'
import moment from 'moment'
import { techniqueInsert } from '@/api/product'
import { dibootApi } from '@/utils/request'
import equipmentModal from '@/components/equipmentModal'

export default {
  name: 'ProductTaskForm',
  components: {
    equipmentModal
  },
  mixins: [form],
  data() {
    return {
      baseApi: '/productTask',
      filePrefix: '/api',
      fileAction: '/uploadFile/upload/dto',
      relObjType: 'ProductTask',
      fileWrapper: {
        picNumList: []
      },
      isUpload: true,
      visible: false,
      form: {},
      options: [],
      numberMin: 0,
      attachMoreList: [{ target: 'GYMC' }],
      equipmentData: []
    }
  },
  computed: {
    equipmentList: {
      get() {
        return this.equipmentData.map(item => item.equipmentName)
      },
      set(val) {
        this.equipmentData = this.equipmentData.filter(item => {
          return val.includes(item.equipmentName)
        })
        this.form.equipment = this.equipmentData.map(item => item.equipmentName).join(',')
        return this.equipmentData.map(item => item.equipmentName)
      }
    }
  },
  async mounted() {
    this.attachMore()
  },
  methods: {
    /** *
     * 提交前对数据的处理（在验证正确之后的处理）
     * @param values 提交的参数
    */
    async enhance(values) {
      this.__setFileUuidList__(values)
      values.startTime = moment(values.startTime).format('YYYY-MM-DD HH:mm:ss')
      values.endTime = moment(values.endTime).format('YYYY-MM-DD HH:mm:ss')
      values.taskNum = `RWD${moment().valueOf()}`
    },
    async afterOpen(id) {
      if (id) {
        // 回显图纸
        this.echoImgFile(id, 'picNum')
      }
    },
    showForm(taskNum) {
      this.visible = true
      this.form.taskNum = taskNum
      this.getEquipment()
    },
    close() {
      this.visible = false
    },
    async onSubmit() {
      const params = this.form
      const res = await techniqueInsert(params)
      if (res.code && res.code !== 200) {
        return
      }
      this.visible = false
      this.$emit('getList')
    },
    // 获取所有设备
    async getEquipment() {
      const res = await dibootApi.get(`/equipment/list`)
      if (res.code === 0) {
        this.options = res.data
      }
    },
    openEquipment() {
      this.$refs['equipmentModal'].open()
    },
    equipmentOK(data) {
      this.equipmentData = data
      this.form.equipment = this.equipmentData.map(item => item.equipmentName).join(',')
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
